<template>
  <div class="managerMana-container common-container">
    <div class="common-top">
      <span class="left title">
        月K长期横盘或突破、日K近期放量最多2次或未放量、日K月K均线多头最佳
        <i class="el-icon-loading" v-if="loading"></i><br>
        <span class="tips">
          AI悟道是基于股票多纬度数据，AI分析出每只股票的在交易时进行买点与卖点提示，您可以选择适合自己的股票进行订阅。
        </span>
      </span>
      <div>
        <el-input v-model="query.bestial"
                  placeholder="最低幅度"
                  style="width: 80px;margin-right: 10px;"
                  size="small" clearable></el-input>
        <el-input v-model="query.keyword"
                  placeholder="代码或名称"
                  style="width: 120px;margin-right: 10px;"
                  size="small" clearable></el-input>
        <el-select v-model="query.section" placeholder="请选择版块" size="small" clearable style="margin-right: 10px;">
          <el-option
            label="全部版块"
            :value="null">
          </el-option>
          <el-option
            v-for="item in sections"
            :key="item"
            :label="`${item}(${sectionStopUpCount[item]}/${sectionCount[item]}/${sectionStopDownCount[item]})`"
            :value="item">
          </el-option>
        </el-select>
        <el-button size="small" type="primary" @click="getData" v-loading="loading">刷新</el-button>
        <el-button size="small" type="primary" @click="$router.push('/transaction/index')">列表</el-button>
      </div>
    </div>
    <div class="common-bot" v-if="tableData.length">
      <el-row style="padding: 5px 0">
        <el-col :span="18" style="font-size: 12px">
          <span v-for="(item,idx) in sections" v-if="idx<25">{{item}}<b title="涨停数/近五日总涨停数/跌停数">({{sectionStopUpCount[item]}}/{{sectionCount[item]}}/{{sectionStopDownCount[item]}})</b>，</span>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-pagination
            v-if="showPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="query.page"
            :page-size="query.limit"
            layout="total, prev, pager, next"
            :total="totalElement"></el-pagination>
        </el-col>
      </el-row>
      <el-row :gutter="5" v-for="(item,idx) in tableData" :key="idx" class="line">
        <el-col :span="24" style="font-size: 12px;line-height: 150%">
          所属概念：{{ item.info.concept }}<br>
          时间：{{ item.createTime | parseTime('{m}-{d} {h}:{i}') }}，
          买入：<b>{{ item.buy }}</b>，
          现价：<b>{{ item.info.now }}</b>
          <span title="浮盈" :class="{word_red:item.currentProfitRatio>0, word_green:item.currentProfitRatio<0}">({{ item.currentProfitRatio }}%)</span>，
          最高：{{ item.info.high }}，
          最低：{{ item.info.low }}，
          开盘：{{ item.info.open }}，
          市值：{{ item.info.totalValueY }}，
          流通市值：{{ item.info.circulationValueY }}，
          市盈率：{{ item.info.pe }}，
          换手率：{{item.info.turnoverRatio}}%/<span title="近期最大换手">{{item.info.maxTurnoverRatio}}%</span>，
          成交额：{{item.info.moneyY}}亿，
          10日最大(撤/盈)：<b><span title="回撤"
                      :class="{word_red:item.profitBackRatio>0, word_green:item.profitBackRatio<0}">
                {{ item.profitBackRatio }}%
            </span>/
          <span title="盈利"
                :class="{word_red:item.profitMaxRatio>0, word_green:item.profitMaxRatio<0}">
                {{ item.profitMaxRatio }}%
          </span></b>

        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple" style="font-size: 12px;line-height: 150%">
            <img :src="`https://webquotepic.eastmoney.com/GetPic.aspx?imageType=t&type=M4&nid=${item.info.eastMoneyFullCode}&timespan=${Math.random()}`"
                 :alt="`https://webquotepic.eastmoney.com/GetPic.aspx?imageType=t&type=M4&nid=${item.info.eastMoneyFullCode}&timespan=`"
                  :title="item.info.concept">
            <div>
              <span title="昨日涨幅" v-if="yesterday.hasOwnProperty(item.code)"
                    :class="{word_red:yesterday[item.code].riseRatio>0, word_green:yesterday[item.code].riseRatio<0}">
                {{ yesterday[item.code].riseRatio }}%
              </span>
              <el-link :href="`https://quote.eastmoney.com/concept2/${item.code}.html`" target="_blank">
                <b style="color: red;" v-if="item.good">★</b><b>{{ item.name }}</b>
              </el-link>
              ({{ item.code }})
              <span title="今日涨幅" :class="{word_red:item.info.riseRatio>0, word_green:item.info.riseRatio<0}">
                  {{ item.info.riseRatio }}%
              </span>
              振幅：{{item.info.amplitude}}%
              {{ item.createTime | parseTime('{m}-{d} {h}:{i}') }}
            </div>
            <div>
              {{ item.info.section }}<b title="涨停数/近五日总涨停数/跌停数">({{sectionStopUpCount[item.section]}}/{{sectionCount[item.section]}}/{{sectionStopDownCount[item.section]}})</b>
              <el-button v-if="collects.indexOf(item.code)===-1" type="primary" size="mini" round @click="collect(item,true)" style="padding: 3px 5px;">关注</el-button>
              <el-button v-if="collects.indexOf(item.code)>-1" type="danger" size="mini" round @click="collect(item,false)" style="padding: 3px 5px;">取消关注</el-button>
            </div>
            <div>评分：{{ item.info.score }}/{{ item.score }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <img :src="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=M&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
                 :alt="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=M&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`">
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <img :src="`http://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=&unitWidth=-6&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
                 :alt="`http://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=&unitWidth=-6&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`"></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <img :src="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=M30&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
                 :alt="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=M30&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`"></div>
        </el-col>
      </el-row>
      <div class="pagination" v-if="tableData.length">
        <el-pagination
          v-if="showPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="query.page"
          :page-size="query.limit"
          layout="total, prev, pager, next"
          :total="totalElement"></el-pagination>
      </div>
    </div>
    <el-empty style="margin-top: 200px" description="流水记录还未产生" v-if="!tableData.length && !loading">
    </el-empty>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import Api from "@/api/index";
import Briefly from "@/layout/components/Briefly";
import pubsub from "pubsub-js";

export default {
  components: {Briefly},
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      showPage: false,
      tableData: [],
      query: {
        bestial: 0,
        keyword: '',
        section: '',
        limit: 14,
        page: 1,
      },
      gender: {
        female: "女",
        male: "男",
      },
      totalElement: 0,
      loading: false,
      yesterday: {},
      sectionCount: {},
      sectionStopUpCount: {},
      sectionStopDownCount: {},
      sections: [],
      collects: [],
      myInterval: null
    };
  },
  watch: {
    'query.section'(val) {
      this.query.page = 1;
      this.getData();
    },
    'query.bestial'(val) {
      this.query.page = 1;
      this.getData();
    },
    'query.keyword'(val) {
      this.query.page = 1;
      this.getData();
    },
    'query.page'(val) {
      this.getData();
      this.setStateData(val);
    },
    'query.limit'(val) {
      this.query.page = 1;
      this.getData();
    },
  },
  methods: {
    close() {
      this.getData();
    },
    //
    setStateData(nowPage) {
      let stateData = {
        nowPage,
      };
      this.$router.replace({
        path: this.$route.path,
        query: {
          stateData: this.$base64.encode(JSON.stringify(stateData)),
        },
      });
    },
    handleSizeChange(val) {
      this.limit = val;
    },
    handleCurrentChange(val) {
      this.nowPage = val;
    },
    getData() {
      this.loading = true;
      Api.transaction.list({
        ...this.query,
        page: this.query.page - 1
      }).then((res) => {
        this.tableData = res.data;
        this.totalElement = res.total;
        this.yesterday = res.extra.yesterday;
        this.sectionCount = res.extra.sectionCount;
        this.sectionStopUpCount = res.extra.sectionStopUpCount;
        this.sectionStopDownCount = res.extra.sectionStopDownCount;
        this.sections = res.extra.sections;
        this.collects = res.extra.collects;
        this.tableData.forEach(item => {
          item.collect = this.collects.indexOf(item.code) > -1
        })
        console.log(this.tableData);
        this.showPage = true;
        this.loading = false;
      }).catch(e => this.loading = false);
    },
    collect(stock, collected) {
      if (collected) {
        Api.stockCollect.modify({code: stock.code}).then(res => this.getData())
      } else {
        Api.stockCollect.cancel({code: stock.code}).then(res => this.getData())
      }
    }
  },
  mounted() {
    if (this.$route.query.stateData) {
      console.log(JSON.parse(this.$base64.decode(this.$route.query.stateData)));
      const stateData = JSON.parse(
        this.$base64.decode(this.$route.query.stateData)
      );
      this.nowPage = stateData.nowPage;
      this.getData();
    } else {
      this.getData();
    }
    this.myInterval = setInterval(() => {
      $(".line img").each(function (i, e) {
        $(e).attr("src", $(e).attr("alt") + Math.random())
      })
    }, 5000)
    pubsub.subscribe('notify', (msgName, data) => {
      this.getData()
    })
  },
  destroyed() {
    clearInterval(this.myInterval)
    pubsub.unsubscribe('notify');
  }
};
</script>

<style lang="scss" scoped>
.left3px {
  margin-left: 3px;
}

.word_red {
  font-style: italic;
  font-size: 14px;
  color: red;
}

.word_green {
  font-style: italic;
  font-size: 14px;
  color: green;
}

.word_red_b {
  font-style: italic;
  font-size: 14px;
  color: red;
  font-weight: bold;
}

.common-bot {
  .line {
    padding: 5px 0;
    width: 100%;

    img {
      width: 100%;
    }
  }
}
</style>
